<template lang="">
  <div class="content">
    <div class="main">
      <div class="search" style="border: 0px solid #000;height: 200px;padding-top: 20px;background-color: #fff;">
        <div class="left" style="float: left;">
          <div class="top" style="border: 0px solid #000;margin-top: 0px;text-align: left;margin-bottom: 5px;">
            <el-select v-model="industry" placeholder="请选择行业" clearable @change="getDepartmentList();industryInput()" >
              <el-option v-for="dict in industryList" :key="dict.dictKey" :label="dict.dictValue" :value="dict.dictValue">
              </el-option>
            </el-select>
            <el-select v-model="province" placeholder="请选择省份" clearable @change="provinceInput()">
              <el-option v-for="item in provinceList" :key="item.dictKey" :label="item.dictKey" :value="item.dictKey">
              </el-option>
            </el-select>          
          </div>
          <div class="bottom" style="border: 0px solid #000;margin-left: 0px;margin-top: 20px;">
            <div class="tit" style="border: 0px solid #000;text-align: left;margin-top: 10px;padding-left: 25px;min-height:35px">
              <span style="font-size: 16px;color: #999;">单位类型</span>
              <div class="jd" style="border: 0px solid #000;margin-left: 90px;margin-top: -20px;">
                <el-checkbox-group v-model="departmentListBox" @change="departmentInput()">
                  <el-checkbox v-for="item in departmentList" :key="item.dictKey" :label="item.dictValue">
                    {{item.dictValue}}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </div>
          
        </div>
        <div class="right" style="float: right;border: 0px solid #000;">
          <div class="cx" style="position: relative;left: -200px;">
            <el-input suffix-icon="el-icon-search" v-model="username" placeholder="请输入客户名称" @input="usernameInput()"
              style="height: 40px;width: 200px;border-radius: 50px;overflow: hidden;">
            </el-input>
            <el-select v-model="customType" placeholder="请选择客户类型" @input="customTypeInput()" clearable>
              <el-option v-for="item in dictList" :key="item.dictId" :label="item.dictKey" :value="item.dictKey"
                style="height: 40px;width: 200px;border-radius: 50px;overflow: hidden;">
              </el-option>
            </el-select>
          </div>
          <div class="cz" style="position: relative;left: 140px;top: -45px;">
            <el-button @click="goto" type="danger" class="button">创建</el-button>
            <el-button @click="deleteRow()" type="danger" class="button">删除</el-button>
          </div>
          <div class="sl" >
            <span style="color: rgb(255, 145, 0);font-size: 28px;">{{total}}</span><br>
            <span style="font-size: 18px;color: #666;">客户数量</span>
          </div>
        </div>
      </div>
      <div class="tabs">
        <el-table border ref="singleTable" :data="userList" highlight-current-row tooltip-effect="dark"
          style="width: 100%;cursor: pointer;" @row-click="rowClick" @row-dblclick="handleSelectionChange">
          <el-table-column type="index" width="55" label="序号" align="center">
          </el-table-column>
          <el-table-column prop="username" label="客户名称" width="230" show-overflow-tooltip>
            <template slot-scope="scope">
              <div style="color:#161616">
                <el-tag type="danger" effect="dark" size="mini" style="margin-right: 5px;"><span style="color: #fff;font-weight: 600;">{{scope.row.cooperationTotal}}合作</span></el-tag>{{ scope.row.username }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="customType" label="客户类型" width="90" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="customSource" label="客户来源" width="90" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="industry" label="行业" width="60" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="departmentType" label="单位类型" width="80" align="center"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="company" label="所属单位" width="180" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="grade" label="单位星级" width="150" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-rate disabled v-model="scope.row.grade">
              </el-rate>
            </template>
          </el-table-column>
          <el-table-column prop="province" label="所属省份" width="80" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="city" label="所属县市" width="80" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="createUser" label="创建人" width="90" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="100" align="center" :formatter="dateFormat"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="followTime" label="跟进时间" width="100" align="center" :formatter="dateFormat"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="information" label="网址"  show-overflow-tooltip>
            <template slot-scope="scope">
              <span style="color:#fe0100">
                <a :href="scope.row.information" target="_blank">{{ scope.row.information }} </a>
              </span>
            </template>
          </el-table-column>
          
          
        </el-table>
        <el-pagination style="margin:20px;text-align: right;" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :page-size="size" :current-page="current" :page-sizes="[10, 20, 30]"
          :total="total" layout="sizes,prev, pager, next">
        </el-pagination>
        <div style="margin-top: 20px">
        </div>
      </div>
    </div>
  </div>
</template>
<script>

  import moment from 'moment';
  export default {
    data() {
      return {
        activeName: 'first',
        userList: [], //客户列表
        dictList: [],
        industryList: [],   //行业列表
        departmentList:[],  //单位类型
        departmentListBox: [],
        industry: '',
        provinceList: [],   //省份列表
        // provinceListBox: [],
        province: '',        
        current: 1,
        size: 20,
        dictVar: '',
        total: 0,
        username: '',
        customType: ''
      }
    },
    mounted() {
      this.getUserList()
      this.getDictList()
      this.getIndustryList()
      this.getProvinceList()
    },
    methods: {
      //省份
      async getProvinceList() {
        // 解构出参数
        const { current, size, dictVar } = this;
        var data = {
          current: 1,
          size: 100,
          dictVar: 'province'
        }
        let result = await this.$API.dict.reqDictList(data)
        // this.total = result.data.total;
        this.provinceList = result.data.data
      },
      //行业
      async getIndustryList() {
        // 解构出参数
        const { current, size, dictVar } = this;
        var data = {
          current: 1,
          size: 100,
          dictVar: 'industry'
        }
        let result1 = await this.$API.dict.reqDictList(data)
        this.industryList = result1.data.data
        this.getDepartmentList()
      },
      //单位类型      
      async getDepartmentList() {
        // 解构出参数
        // this.userData.departmentType = ''
        const { current, size, dictVar } = this;
        var data = {
          current: 1,
          size: 100,
          dictVar: this.industry
        }
        let result = await this.$API.dict.reqDictList(data)
        this.departmentList = result.data.data
      },
      dateFormat: function (row, column) {
        // debugger
        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return moment(date).format("YYYY/MM/DD");
      },
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleSizeChange(val) {
        // alert(`每页 ${val} 条`);
        this.size = val
        this.getUserList()
      },
      handleCurrentChange(val) {
        // alert(`当前页: ${val}`);
        this.current = val
        this.getUserList()
      },
      customTypeInput() {
        this.getUserList()
      },
      departmentInput() {
        this.getUserList()
      },
      provinceInput(){
        this.getUserList()
      },
      industryInput(){
        this.getUserList()
      },
      // 获取客户列表
      async getUserList() {
        // 解构出参数
        const {
          current,
          size,
          userType,
          username, customType, industry, province,departmentType
        } = this;
        var data = {
          current: current,
          size: size,
          userType: "23",
          timeBucket: '3'
        }
        if (username != '') {
          data.username = username
        }if (this.departmentListBox.length > 0) {
          data.departmentType = this.departmentListBox.toString()
        }  if (customType != '') {
          data.customType = customType
        }  if (industry != '') {
          data.industry = industry
        }   if (province != '') {
          data.province = province
        } 
        let result = await this.$API.user.reqUserList(data)
        this.total = result.data.total;
        this.userList = result.data.data
      },
      // 获取客户类型列表
      async getDictList() {
        // 解构出参数    
        const { current, size, dictVar } = this;
        var data = {
          current: 1,
          size: 100,
          dictVar: 'CustomType'
        }
        let result = await this.$API.dict.reqDictList(data)
        // this.total = result.data.total;
        this.dictList = result.data.data

      },
      // 客户详情
      // detailRow(){
      //   if (this.currentRow == null) {
      //     this.$message("请选择一行进行操作");
      //   } else {
      //     this.$router.push({
      //     path: '/custem/detail',
      //     name: 'custemDetail',
      //     query: {
      //       userId: this.currentRow.userId,
      //     }
      //   });
      //   }
      // },
      // 删除客户
      rowClick(row) {
        this.currentRow = row
      },
      deleteRow() {
        if (this.currentRow == null) {
          this.$message("请选择一行进行删除操作");
        } else {
          this.$confirm("确认删除客户吗？", "提示", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            var data = {
              userId: this.currentRow.userId
            }
            this.$API.user.deleteStaffy(data).then(res => {
              if (res.data.code == 200) {
                this.$message.success("删除成功！");
                this.getUserList()
              } else {
                this.$message.error("删除失败！");
              }
            })
          })
        }
      },
      usernameInput() {
        this.getUserList()
      },
      goto() {
        this.$router.push({
          path: '/InsertCustem'
        });
      },
      handleSelectionChange(val) {
        console.log(val)
        this.currentRow = val;
        this.$router.push({
          path: '/custem/detail',
          name: 'custemDetail',
          query: {
            userId: this.currentRow.userId,
          }
        });
      }
    }
  }

</script>
<style scoped>
  @import "../style/style.css";

  .main {
    border: 0px solid #000;
    border-radius: 10px;
    overflow: hidden;
  }

  .main>>>.el-tabs__header {
    background-color: #fff;
    padding-left: 20px;
    height: 50px;
  }

  .main>>>.el-tabs__nav {
    height: 45px;
    padding-top: 5px;
  }

  .main>>>.el-checkbox-button__inner {
    border: none;
    background-color: transparent;
  }

  .main>>>.el-checkbox-button.is-checked .el-checkbox-button__inner {
    color: #fff;
    background-color: #409EFF;
    border-color: #409EFF;
    box-shadow: -1px 0 0 0 #8cc5ff;
  }

  .search .left {
    padding-left: 20px;
    border: 0px solid #000;
    width: 900px;
  }

  .main .right {
    border: 0px solid #000;
    padding-top: 10px;
  }
.sl{
  /* box-shadow: 1px 1px 6px 3px #c4daff; */
  /* border: 1px solid #000; */
  border-radius: 10px;
  height: 100px;
  position: relative;
  left: 260px;
  top: -30px;
  width: 200px;
  line-height: 45px;
  background-color:#fe00000b ;
}
  .main >>>.el-select,
  .el-input {
    width: 200px;
    margin-left: 20px;
    border-radius: 50px;
    overflow: hidden;
    height: 40px;
    border: 0px solid #000;
  }

  .main >>>.el-input__icon {
    color: #000;
    font-weight: 600;
  }

  .main >>>.el-select .el-input .el-select__caret {
    color: #000;
  }

  .main .right {
    padding-right: 40px;
  }

  .main>>>.el-input__inner {
    background-color: #f5f5f7 !important;
  }
</style>